<template>
  <div class="technological-process">
    <img src="../../assets/images/technological_process_1.jpg" alt srcset />
    <ul class="clear">
      <li v-for="(item, index) in imgs" :key="index" @click="goDetail(index)">
        <img :src="item.img" alt srcset />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "technological-process",
  components: {},
  data() {
    return {
      imgs: [
        {
          img: require("../../assets/images/technological_process_2.jpg"),
        },
        {
          img: require("../../assets/images/technological_process_3.jpg"),
        },
        {
          img: require("../../assets/images/technological_process_4.jpg"),
        },
        {
          img: require("../../assets/images/technological_process_5.jpg"),
        },
        {
          img: require("../../assets/images/technological_process_6.jpg"),
        },
        {
          img: require("../../assets/images/technological_process_7.jpg"),
        },
        {
          img: require("../../assets/images/technological_process_8.jpg"),
        },
        {
          img: require("../../assets/images/technological_process_9.png"),
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    goDetail(index) {
      if (index == 2) {
        //   土壤采样
        this.$router.push({
          name: "sampling",
        });
      } else if (index == 6) {
        this.$router.push({
          name: "planting-code",
        });
      } else {
        this.$router.push({
          name: "technological-process-detail",
          query: {
            status: index + 1,
          },
        });
      }
    },
  },
};
</script>

<style scoped>
.technological-process {
  padding-bottom: 40px;
}
.technological-process img {
  width: 100%;
  display: block;
}
li {
  width: 50%;
  float: left;
}
</style>